import { X, Plus, ArrowLeft, ArrowRight } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import animate from "../preview/utils/animate";
import { cn } from "@/lib/utils";

const animateNames = Object.keys(animate);

function DropdownMenuDemo({ children, onAdd }) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
      <DropdownMenuContent className="w-32">
        <DropdownMenuGroup>
          {animateNames.map((name) => (
            <DropdownMenuItem
              value={name}
              key={name}
              onClick={() => {
                onAdd(name);
              }}
            >
              <Plus />
              {name}
            </DropdownMenuItem>
          ))}
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

const AnimateQuene = ({ value, onChange }) => {
  return (
    <div className="flex gap-4 flex-wrap">
      {value?.map((item, index) => {
        return (
          <div
            key={item.id}
            className="w-32 bg-black/70 text-white flex-col gap-y-2 cursor-pointer h-32 flex justify-center items-center rounded-lg text-2xl relative"
          >
            <div className="">{item.name}</div>
            <X
              className="absolute right-0 top-0 translate-x-1/2 -translate-y-1/2 text-red-500 border border-red-500 rounded-full cursor-pointer bg-white"
              onClick={() => {
                onChange(value.filter((i) => i.id !== item.id));
              }}
            />
            <div className="flex gap-x-2 justify-evenly">
              <ArrowLeft
                onClick={() => {
                  if (index === 0) return;
                  const item = value.splice(index, 1)[0];
                  value.splice(index - 1, 0, item);
                  onChange([...value]);
                }}
                className={cn(index === 0 && "cursor-not-allowed opacity-20")}
              />
              <ArrowRight
                onClick={() => {
                  if (index === value.length - 1) return;
                  const item = value.splice(index, 1)[0];
                  value.splice(index + 1, 0, item);
                  onChange([...value]);
                }}
                className={cn(
                  index === value.length - 1 && "cursor-not-allowed opacity-20"
                )}
              />
            </div>
          </div>
        );
      })}
      <DropdownMenuDemo
        onAdd={(name) => {
          onChange([
            ...(value || []),
            {
              id: Math.max(...(value?.map((i) => i.id) ?? []), 0) + 1,
              name,
            },
          ]);
        }}
      >
        <div className="w-32 cursor-pointer h-32 border-dashed flex border justify-center items-center rounded-lg text-2xl relative">
          <Plus />
        </div>
      </DropdownMenuDemo>
    </div>
  );
};

export default AnimateQuene;
